<template>
  <div>
    <div class="cash_out_wrapper">
      <div class="live_wrapper clearfix" style="margin-top: 10px">
        <Button type="primary"
                @click.stop="exportData()"
                style="float:right; width: 80px;height: 34px;font-size: 14px; margin-left: 10px">导出
        </Button>
        <Input v-model="filter.name"
               @on-search="search"
               search
               enter-button="搜索"
               placeholder="请输入申请人姓名"
               style="display:inline-table; width: 210px; margin-right: 10px" />
        <Input v-model="filter.phone"
               @on-search="search"
               search
               enter-button="搜索"
               placeholder="请输入手机号码"
               style="display:inline-table; width: 210px; margin-right: 10px" />
        <DatePicker type="daterange"
                    v-model="filter.created_at"
                    @on-change="search"
                    placement="bottom-end"
                    placeholder="选择时间区间"
                    style="width: 200px; margin-right: 10px;"></DatePicker>
        <Select v-model="filter.audit_state"
                style="width:210px;margin-right:10px;"
                @on-change="search"
                placeholder="全部状态">
          <Option :value="-1">全部</Option>
          <Option :value="0">待审核</Option>
          <Option :value="1">提现成功</Option>
          <Option :value="2">提现失败</Option>
        </Select>
      </div>

      <Row :gutter="10">
        <p class="admin_title">
          提现记录
        </p>
        <Row class="margin-top-10 table_pattern table_pattern2">
          <Table style="width: calc(100vw - 256px - 36px - 32px)"
                 :loading="loading"
                 :columns="columns"
                 :data="list"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation.totalPage"
                :page-size="pagenation.perPage"
                :current="pagenation.currentPage"
                show-elevator
                show-total
                @on-change="change"></Page>
        </Row>
      </Row>
    </div>

    <Modal v-model="showAuditModal"
           title="提现审核"
           width="40%"
           :mask-closable="false"
           class="public_modal_header edit_modal">
      <Form :model="formValidate"
            ref="formValidate"
            :label-width="80"
            style="width: 90%;margin: 0 auto;padding: 25px 0 10px;">
        <FormItem label="审核结果" class="label_required">
          <RadioGroup v-model="formValidate.audit_state">
            <Radio :label="1">通过</Radio>
            <Radio :label="2">不通过</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="拒绝理由" v-if='formValidate.audit_state == 2'>
          <Input v-model="formValidate.audit_remark"
                 type="textarea"
                 :rows="4"
                 placeholder="请输入拒绝理由" />
        </FormItem>
      </Form>
      <div class="btns">
        <Button :loading="isSubmitting" type="primary" @click="auditSubmit">提交</Button>
      </div>
    </Modal>

    <Modal v-model="showDetailModal"
           title="详情"
           width="600px"
           :mask-closable="false"
           class="public_modal_header edit_modal">
      <div class="flex modal-detail">
        <div class="title">银行账户相关信息</div>
        <div class="item"><span>账户名称:</span>{{ recordInfo.bank_account }}</div>
        <div class="item"><span>银行账号：</span>{{ recordInfo.account }}</div>
        <div class="item"><span>开户行：</span>{{ recordInfo.bank }}</div>
        <div class="item"><span>开户行地址：</span>{{ recordInfo.bank_address }}</div>

        <div class="title">申请人相关信息</div>
        <div class="item"><span>申请人姓名:</span>{{ recordInfo.name }}</div>
        <div class="item"><span>申请人电话：</span>{{ recordInfo.phone }}</div>
        <div class="item"><span>备注：</span>{{ recordInfo.remark || '无' }}</div>

        <div class="title">结算信息</div>
        <div class="item"><span>提现金额(元):</span>{{ recordInfo.money_origin }}</div>
        <div class="item"><span>微信手续费(元)：</span>{{ recordInfo.money_wx }}</div>
        <div class="item"><span>实际到账金额(元)：</span>{{ recordInfo.money }}</div>
        <div class="item"><span>平台佣金(元)：</span>{{ recordInfo.money_yj }}</div>
        <div class="item" style="height: fit-content" v-if="recordInfo.receipt_js">
          <span>结算函：</span><img :src="recordInfo.receipt_js" alt="" @click="handleView(recordInfo.receipt_js)">
        </div>
        <div class="item"><span>申请时间：</span>{{ recordInfo.created_time }}</div>

        <div class="title">审核信息</div>
        <div class="item"><span>审核状态：</span>{{ recordInfo.audit_state_name }}</div>
        <div class="item" v-if="recordInfo.audit_remark"><span>审核备注：</span>{{ recordInfo.audit_remark }}</div>
        <div class="item"><span>审核时间：</span>{{ recordInfo.audit_time }}</div>
        <div class="item" style="height: fit-content" v-if="recordInfo.receipt_dk">
          <span>打款凭证：</span><img :src="recordInfo.receipt_dk" alt="" @click="handleView(recordInfo.receipt_dk)">
        </div>
      </div>
    </Modal>

    <Modal title="查看图片" v-model="visible">
      <img :src="imgName" v-if="visible" style="width: 100%">
    </Modal>
  </div>
</template>
<script>
import Time from '@/tool/Time'
import { childBtnPermission, cashList, auditCash } from '@/api/main'

export default {
  data () {
    return {
      permissionList: [],
      isSubmitting: false,
      loading: true,
      pagenation: {},
      list: [],
      columns: [
        {
          key: 'name',
          title: '申请人姓名',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.name)
          },
        },
        {
          key: 'phone',
          width: 150,
          title: '申请人电话',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.phone)
          },
        },
        {
          key: 'created_time',
          width: 180,
          title: '申请时间',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.created_time)
          },
        },
        {
          key: 'audit_state_name',
          title: '状态',
          width: 100,
          align: 'center',
          render: (h, params) => {
            let state_name = params.row.audit_state_name
            if (state_name === '提现成功') {
              return h('strong', { style: { color: '#07BD21' } }, state_name)
            } else if (state_name === '提现失败') {
              return h('strong', { style: { color: '#D40303' } }, state_name)
            } else {
              return h('strong', { style: { color: '#2B76EE' } }, state_name)
            }
          },
        },
        {
          key: 'bank_account',
          width: 180,
          title: '账户名称',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.bank_account)
          },
        },
        {
          key: 'account',
          width: 180,
          title: '银行账号',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.account)
          },
        },
        {
          key: 'bank',
          width: 150,
          title: '开户行',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.bank)
          },
        },
        {
          key: 'bank_address',
          width: 150,
          title: '开户行地址',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.bank_address)
          },
        },
        {
          key: 'money_origin',
          title: '提现金额(元)',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.money_origin)
          },
        },
        {
          key: 'money',
          title: '实际到账金额(元)',
          width: 130,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.money)
          },
        },
        {
          key: 'money_wx',
          title: '微信手续费(元)',
          width: 130,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.money_wx)
          },
        },
        {
          title: '操作',
          align: 'center',
          width: 120,
          render: (h, params) => {
            return h('div', [
              h(
                  'Button',
                  {
                    props: {
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px',
                      border: 0,
                      background: 'transparent',
                      fontSize: '14px',
                      color: '#377EEF',
                    },
                    on: {
                      click: () => {
                        this.recordInfo = Object.assign({}, params.row)
                        this.showDetailModal = true
                      },
                    },
                  },
                  '详情',
              ),
              h(
                  'Button',
                  {
                    props: {
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px',
                      border: 0,
                      background: 'transparent',
                      fontSize: '14px',
                      color: '#377EEF',
                      display: (this.permissionList.indexOf('cash-audit') !== -1 && params.row.audit_state == 0) ? 'inline-block' : 'none'
                    },
                    on: {
                      click: () => {
                        this.formValidate.id = params.row.id
                        this.showAuditModal = true
                      },
                    },
                  },
                  '审核',
              )
            ])
          },
        },
      ],
      filter: {
        page: 0,
        page_size: 20,
        shop_id: this.$route.params.shop_id,
        name: '',
        phone: '',
        audit_state: -1,
        created_at: ['', ''],
        date_range: '',
      },
      formValidate: {
        id: 0,
        audit_state: 0, // 审核结果(1:审核成功 2:审核失败)
        audit_remark: '',
      },
      showAuditModal: false,
      recordInfo: {},
      showDetailModal: false,
      visible: false,
      imgName: '',
    }
  },
  watch: {
    'filter.created_at': function () {
      let created_at_start = Time.dateToTimestamp(this.filter.created_at[0])
      let created_at_end = Time.dateToTimestamp(this.filter.created_at[1])
      if (created_at_start !== 0 && created_at_end !== 0) {
        this.filter.date_range = created_at_start + '-' + created_at_end
      } else {
        this.filter.date_range = ''
      }
    },
  },
  methods: {
    handleView (img_url) {
      this.imgName = img_url
      this.visible = true
    },
    auditSubmit () {
      if (!this.formValidate.audit_state) {
        this.$Message.error("请选择审核结果");
        return;
      }

      if (this.formValidate.audit_state == 2 && !this.formValidate.audit_remark) {
        this.$Message.error("请输入拒绝理由");
        return;
      }

      // console.log(this.formValidate);return false;

      if (this.isSubmitting) return
      this.isSubmitting = true

      auditCash(this.formValidate).then(res => {
        if (res.code == 0) {
          this.$Message.success('操作成功')
          this.showAuditModal = false
          this.search()
        } else {
          this.$Message.error(res.text)
        }
        setTimeout(() => this.isSubmitting = false, 1000)
      })
    },
    change: function (page) {
      this.loading = true
      this.filter.page = page - 1
      this.getList()
    },
    search: function () {
      this.filter.page = 0
      this.getList()
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    exportData () {
      let _this = this
      _this.filter.page = 0
      _this.filter.page_size = 500
      _this.export_list = []
      _this.export()
    },
    export () {
      let _this = this
      cashList(this.filter).then(res => {
        if (res.code == 0) {
          if (res.data.length) {
            _this.export_list.push.apply(_this.export_list, res.data)
            _this.filter.page++
            setTimeout(() => {
              _this.export()
            }, 500)
          } else {
            _this.filter.page_size = 20
            const { export_json_to_excel } = require('../../excel/Export2Excel');
            const tHeader = ['申请时间', '银行账号', '开户行', '申请人姓名', '申请人电话', '提现金额(元)', '实际到账金额(元)', '审核状态', '提现备注'];
            const filterVal = ['created_time', 'account', 'bank', 'name', 'phone', 'money_origin', 'money', 'audit_state_name', 'remark'];
            const data = _this.formatJson(filterVal, _this.export_list)
            export_json_to_excel(tHeader, data, '提现记录')
          }
        }
      })
    },
    getPermissionList (parent_name) {
      childBtnPermission({ parent_name }).then(res => {
        if (res.code === 0) {
          this.permissionList = res.data
        }
      })
    },
    getList () {
      cashList(this.filter).then(res => {
        if (res.code == 0) {
          this.list = res.data
          this.loading = false
          this.pagenation.currentPage = parseInt(res.currentPage) + 1
          this.pagenation.totalPage = parseInt(res.totalPage)
          this.pagenation.perPage = parseInt(res.perPage)
        }
      })
    },
  },
  mounted () {
    this.getPermissionList('assets')
    this.getList()
  },
}
</script>
<style lang="less">
@import '../../index.less';

.cash_out_wrapper {
  background: #fff;
  padding: 18px;
}

.modal-detail {
  padding: 0 5% 40px;

  .title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #333333;
  }

  .item {
    margin-left: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 30px;
    font-size: 14px;
    color: #666666;

    span {
      width: 140px;
      flex-shrink: 0;
    }

    img {
      width: 120px;
      height: 120px;
    }
  }
}
</style>
